<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .inputdiv{
            display:flex;border: 1px solid #D2D2D2!important;background-color: #fff;height: 38px;line-height: 38px;padding: 0px 19px;
            border-radius: 19px;
        }
        .layui-input {
            border-style: none;
        }
    </style>
</head>
<body style="background: url(layui/images/img/bg.jpg);background-size:100%">
<div class="layui-main" style="margin-top: 200px">
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset4">
            <form class="layui-form" th:action="@{/registerUser}" method="post">
                <div class="layui-form-item" style="margin-bottom: 30px">
                    <div style="text-align: center;font-size: 20px;color: dimgrey">
                        <h2>Register</h2>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="inputdiv">
                        <i class="layui-icon layui-icon-username"></i>
                        <input type="text" name="username" lay-verify="required|username" autocomplete="off" placeholder="昵称" class="layui-input" style="text-align: center;background-color: #f3fdff">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="inputdiv">
                        <i class="layui-icon layui-icon-password"></i>
                        <input type="password" name="password" lay-verify="required|password" autocomplete="off" placeholder="密码" class="layui-input" style="text-align: center;background-color: #f3fdff">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="inputdiv">
                        <i class="layui-icon layui-icon-password"></i>
                        <input type="password"  lay-verify="required|pass" autocomplete="off" placeholder="确认密码" class="layui-input" style="text-align: center;background-color: #f3fdff">
                    </div>
                </div>
                <div class="layui-form-item" style="text-align: center;margin-top: 30px">
                    <button class="layui-btn layui-btn-radius" lay-submit style="background-color: seagreen;margin-left: 10px">IN</button>
                </div>
            </form>
        </div>
        <div class="layui-col-xs5 layui-col-xs-offset7">
            <a th:href="@{/login}" style="color:dimgrey ">用已有帐号登入</a>
        </div>
    </div>
</div>
<script  src="layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer,form = layui.form;

        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                /*if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }*/
                var message = '';
                $.ajax({
                    type:"post",
                    url:"/check",
                    async: false, //改为同步请求
                    data:{
                        "userName":value
                    },
                    success:function (data) {
                        if(data){

                        }else{
                            message ="用户名已存在，请重新输入！"
                        }
                    }

                    /* if (data["data"]["message"]!=''){
                         return data["data"]["message"];
                     }*/


                });
                if (message !== '')
                    return message;
            },
            pass: function (value) {
                if($('input[name=password]').val() !== value)
                    return '两次密码输入不一致！';
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,password: [
                /^[\S]{3,12}$/,'密码必须3到12位，且不能出现空格'
            ]

        });
    });




</script>
</body>
</html>